<template>
  <section class="memberCompany">
    <el-row :span="24" class="action-bar" >
      <el-button type="primary" size="medium" @click="toEnterprise">返回会员企业</el-button>
      <!-- <el-button type="primary" size="medium" @click="editor">绑定企业信息</el-button> -->
      
    </el-row>
    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="nickname" label="姓名" width="120"/>
			<el-table-column prop="phone" label="手机" width="100"/>
			<el-table-column prop="vip_name" label="会员级别" width="100"/>
            <el-table-column prop="position" label="职位" width="120"/>
            <el-table-column prop="updated_at" label="绑定时间" width="160"/>
			<!-- <el-table-column label="操作" width="250">
				<el-button type="danger" size="mini" >删除</el-button>
			</el-table-column> -->
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
                <el-pagination 
				background
				:page-size="16"
				 layout="prev, pager, next" 
				 :total="totalPage"
				@current-change="pageChange"
				 ></el-pagination>
            </div>
    </el-col>

  </section>
</template>

<script>
export default {
	data(){
		return {
        users:[],
        page:1,
        totalPage:0,
        companyId:''//企业id
		}
  },
  methods: {

    handleClose(){
      //编辑弹窗关闭前的回调

    },
    async getUserReCompanyInfoList(){
        //获取企业用户
        const res=await this.$api.getUserReCompanyInfoList({
            companyId:this.companyId,
            page:this.page,
            pagesSize:16,
        })
        if(res.data.level=='success'){
            this.users=res.data.data.user_re_company_info;
            this.totalPage=res.data.data.lastPage
        }
    },
    pageChange(e){
        this.page=e;
        this.getUserReCompanyInfoList()
    },
    toEnterprise(){
      //返回会员管理
      this.$router.push('Enterprise')
    }
  },
  mounted() {
      this.companyId=this.$route.params.companyId ||'a05b218a3d3195f268728559e4aef5ab';//会员id
      this.getUserReCompanyInfoList()
  },
}
</script>
<style lang='scss' scoped>
  .memberCompany{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
            margin: 10px 0px;
            box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
            background: #f2f2f2;
            padding: 8px;
            margin: 10px 0px;
            box-sizing: border-box;
                }
		.dialog-footer{
			text-align: center;
		}
        .tip{
            margin-top:50px;
            span{
                cursor: pointer;
                color:red;
            }
        }
  }
</style>

<style>

	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .memberCompany .el-dialog__body{overflow: auto;}
</style>
